<template>
  <div class="mui-content mh-container pd bg-w">
    <mh-header headName="申请详情"> </mh-header>
    <div class="base-info mh-pd">
      <h4 class="detail-title">基本资料</h4>
      <ul class="info-list">
        <li class="info-item">
          <label>ID</label>
          <span v-text="baseInfo.id">-</span>
        </li>
        <li class="info-item">
          <label>昵称</label>
          <span v-text="baseInfo.nickname">-</span>
        </li>
        <li class="info-item">
          <label>真实姓名</label>
          <span v-text="baseInfo.trueName || '未填写'">-</span>
        </li>
        <li class="info-item">
          <label>性别</label>
          <span v-if='baseInfo.gender==0'>男</span>
          <span v-if='baseInfo.gender==1'>女</span>
          <span v-if='baseInfo.gender==2'>保密</span>
        </li>
        <li class="info-item">
          <label>居住地</label>
          <span v-text="baseInfo.province">-</span>
        </li>
        <li class="info-item">
          <label>学历</label>
          <span v-text="baseInfo.education">-</span>
        </li>
        <li class="info-item">
          <label>婚姻状况</label>
          <span v-text="baseInfo.marriage">-</span>
        </li>
        <li class="info-item">
          <label>身份证号</label>
          <span v-text="baseInfo.idCard || '未填写'">-</span>
        </li>
        <li class="info-item">
          <label>申请类别</label>
          <span v-if="baseInfo.hong_type==0">区域红娘</span>
          <span v-if="baseInfo.hong_type==1">车友红娘</span>
          <span v-if="baseInfo.hong_type==2">老乡红娘</span>
          <span v-if="baseInfo.hong_type==3">校友红娘</span>
          <span v-if="baseInfo.hong_type==4">行业红娘</span>
        </li>
      </ul>
    </div>

    <div class="my-gallery mh-pd">
      <div class="panel-head">
        <a class="mui-navigate-right">真实照片</a>
      </div>
      <div class="pixes flex-bt">
        <div class="gallery-box" v-for="(item,index) in gallery" :key="index">
          <div class="gallery-box-inner">
            <img :src="item.image" alt="照片">
          </div>
        </div>
      </div>
    </div>

    <div class="my-identify mh-pd">
      <h4 class="detail-title">ta的认证</h4>
      <div class="identify-rows flex-bt">
        <a class="identify-item">
          <div class="img-box">
            <div :class='baseInfo.is_shiming==1 ? "img-inner check" : "img-inner"'>
              <img src="../../assets/images/ico/ico_truename.png" alt="实名认证">
            </div>
          </div>
          <span>实名认证</span>
        </a>
        <a class="identify-item">
          <div class="img-box">
            <div :class='baseInfo.is_xueli==1 ? "img-inner check" : "img-inner"'>
              <img src="../../assets/images/ico/ico_edu.png" alt="学历认证">
            </div>
          </div>
          <span>学历认证</span>
        </a>
        <a class="identify-item">
          <div class="img-box">
            <div :class='baseInfo.is_phone==1 ? "img-inner check" : "img-inner"'>
              <img src="../../assets/images/ico/ico_phone.png" alt="手机认证">
            </div>
          </div>
          <span>手机认证</span>
        </a>
        <a class="identify-item">
          <div class="img-box">
            <div :class='baseInfo.is_caifu==1 ? "img-inner check" : "img-inner"'>
              <img src="../../assets/images/ico/ico_zhima.png" alt="财富认证">
            </div>
          </div>
          <span>财富认证</span>
        </a>
        <a class="identify-item">
          <div class="img-box">
            <div :class='baseInfo.is_car==1 ? "img-inner check" : "img-inner"'>
              <img src="../../assets/images/ico/ico_car.png" alt="车辆认证">
            </div>
          </div>
          <span>车辆认证</span>
        </a>
      </div>
    </div>

    <div class="btn-box">
      <button type="button" class="btn-sug" @tap='submit(2)'>给意见</button>
      <button type="button" class="btn-score" @tap='submit(1)'>审核通过</button>
    </div>
  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "matchmaker-review",
    data () {
      return {
        baseInfo: {
          id: '414524123',
          nickname: '小白',
          trueName: '小雪',
          sex: '女',
          living: '内蒙古',
          edu: '本科',
          marriage: '已婚',
          idCard: '4127*******1245',
          applicationType: '校园红娘'
        },
        gallery: [
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1412847876,2340663577&fm=11&gp=0.jpg',
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1412847876,2340663577&fm=11&gp=0.jpg',
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1412847876,2340663577&fm=11&gp=0.jpg',
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1412847876,2340663577&fm=11&gp=0.jpg',
        ],
        info: {}
      }
    },
    components: {
      MhHeader
    },
    methods:{
      submit(type){
        let self = this;
        MH_API.examineHong({
          id: self.id,
          type: type
        }).then(res => {
          if (res.status === 200) {
            mui.toast('审核成功');
          }
          else{
            mui.toast(res.msg);
          }
        })
      }
    },
    created(){
      let id = this.$route.query.id;
      let userid = this.$route.query.userid;
      this.id = id;
      let self = this;
      MH_API.getUserInfo({
        id: userid,
        is_hong: 1
      }).then(res => {
        if (res.status === 200) {
          self.baseInfo = res.data;
          self.gallery = res.data.images;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .base-info {border-bottom: 1px solid #eee;}
  .detail-title {
    margin-bottom: 1rem;
    font-size: 1.4rem;
    color: #333;
  }
  .info-item>label {
    display: inline-block;
    width: 40%;
    font-size: 1.4rem;
    color: #aaa;
  }
  .info-item>span {font-size: 1.4rem;color: #666;}
  .my-gallery {
    border-bottom: 1px solid #eee;
    .panel-head {
      position: relative;
      margin-bottom: 1rem;
      .mui-navigate-right:after, .mui-push-right:after {right: 0;}
    }
  }
  .mui-table-view-cell,.panel-head {@include sc(1.5rem, #333);}
  .gallery-box {margin-left: .4rem;}
  .gallery-box-inner,.upload-in {
    width: 7rem;
    height: 7rem;
    overflow: hidden;
    img {width: 100%;}
  }
  .my-identify {
    margin-top: 1rem;
    .identify-item {
      text-align: center;
      @include sc(1.2rem, #666)
    }
    .img-inner {
      position: relative;
      width: 4rem;
      height: 4rem;
      margin-bottom: .5rem;
      background: #eee;
      border-radius: 100%;
      text-align: center;
      img {height: 45%;width: auto;@include center;}
      &.check {background: linear-gradient(90deg, #dd65a1 0%, #fa7b75 100%);}
      &.ident-phone {background: linear-gradient(90deg, #cf8ddd 0%, #a96dfa 100%);}
    }
  }
  .btn-box {
    padding: 2rem 0;
    text-align: center;
  }
  .btn-sug,.btn-score {
    width: 8.5rem;
    height: 3.2rem;
    margin-right: 2rem;
    border: .05rem solid #e685aa;
    border-radius: 1.6rem;
    font-size: 1.5rem;
  }
  .btn-sug {
    color: #e685aa;
  }
  .btn-score {
    background: #e685aa;
    color: #fff;
  }
  .mui-bar-nav~.mui-content{ padding-top:0;}
</style>
